import React from 'react';
import PropTypes from 'prop-types';

export default function Icon({ className, active }) {
	if (active === 'empty') {
		return (
			<svg
				width="143px"
				height="108px"
				viewBox="0 0 143 108"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				xmlnsXlink="http://www.w3.org/1999/xlink"
			>
				<title></title>
				<desc>Created with Sketch.</desc>
				<defs>
					<rect
						id="path-1"
						x="232"
						y="761"
						width="928"
						height="383"
						rx="2"
					></rect>
					<filter
						x="-1.0%"
						y="-2.2%"
						width="102.0%"
						height="105.0%"
						filterUnits="objectBoundingBox"
						id="filter-2"
					>
						<feOffset
							dx="0"
							dy="1"
							in="SourceAlpha"
							result="shadowOffsetOuter1"
						></feOffset>
						<feGaussianBlur
							stdDeviation="3"
							in="shadowOffsetOuter1"
							result="shadowBlurOuter1"
						></feGaussianBlur>
						<feColorMatrix
							values="0 0 0 0 0.819607843   0 0 0 0 0.843137255   0 0 0 0 0.874509804  0 0 0 0.601289336 0"
							type="matrix"
							in="shadowBlurOuter1"
						></feColorMatrix>
					</filter>
				</defs>
				<g
					id="页面-1"
					stroke="none"
					strokeWidth="1"
					fill="none"
					fillRule="evenodd"
				>
					<g
						id="主页优化-空状态"
						transform="translate(-853.000000, -940.000000)"
					>
						<g id="矩形备份-copy备份-7">
							<use
								fill="black"
								fillOpacity="1"
								filter="url(#filter-2)"
								xlinkHref="#path-1"
							></use>
							<use fill="#FFFFFF" fillRule="evenodd" xlinkHref="#path-1"></use>
						</g>
						<rect
							id="Rectangle-Copy-4备份-Copy备份-3"
							stroke="#E7EAEF"
							fill="#FFFFFF"
							x="712.5"
							y="888.5"
							width="423"
							height="235"
						></rect>
						<g id="编组-26备份" transform="translate(853.000000, 940.000000)">
							<image
								id="位图"
								x="0"
								y="0"
								width="143"
								height="108"
								xlinkHref=""
							></image>
						</g>
					</g>
				</g>
			</svg>
		);
	} else if (active === 'example') {
		return (
			<svg
				width="24px"
				height="24px"
				viewBox="0 0 24 24"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				xmlnsXlink="http://www.w3.org/1999/xlink"
			>
				<desc>Created with Sketch.</desc>
				<g
					id="页面-1"
					stroke="none"
					strokeWidth="1"
					fill="none"
					fillRule="evenodd"
				>
					<g id="编组" fillRule="nonzero">
						<polygon id="路径" fill="#F04038" points="0 0 24 0 24 24"></polygon>
						<path
							d="M15.216,5.28891429 L14.1805714,4.25348571 L14.6029714,3.8304 L15.2441143,4.47154287 C15.3634286,4.11497145 15.4436572,3.77828573 15.4964571,3.46011429 L16.0470857,3.65897142 C15.9764571,4.0224 15.8838857,4.38102855 15.7721143,4.73348571 L15.3778286,4.60525713 L16.0710857,5.29851429 C16.4742857,5.16822858 16.8665143,5.00845716 17.2450286,4.81851429 L17.5302857,5.39862858 C17.20406,5.54497484 16.8650217,5.6608952 16.5174857,5.74491429 L17.1264,6.35382858 L16.7033143,6.77622858 L15.6672,5.7408 L15.0685714,6.33942858 L15.9620571,7.23222858 L15.5396571,7.65531429 L14.6454857,6.76251429 L14.0283429,7.37965713 L15.1926857,8.544 L14.7648,8.97188571 L13.6004571,7.80754287 L12.5026286,8.90537142 L12.0514286,8.45417142 L13.1485714,7.35565713 L12,6.2064 L12.4272,5.77851429 L13.5771429,6.92845713 L14.1949714,6.31062858 L13.3062857,5.42262858 L13.7293714,4.99885713 L14.6180571,5.88754287 L15.2166857,5.2896 L15.216,5.28891429 Z M12.7213714,4.48662858 L10.4118857,6.79542858 L9.97988571,6.36342858 L12.2173714,4.12525713 C11.7236571,4.35291427 11.2292571,4.53394284 10.7348571,4.64777142 L10.8630857,4.03474287 C11.6237015,3.92196635 12.3550481,3.6620355 13.0162286,3.26948571 L12.4882286,2.74148571 L12.9209143,2.30948571 L13.4763429,2.8656 L14.3657143,1.9776 L14.7977143,2.4096 L13.9097143,3.29828571 L14.3465143,3.73508571 L13.9145143,4.16777142 L13.4770286,3.73028571 L13.2301714,3.97714287 C13.218628,4.39641783 13.1900329,4.81504965 13.1444571,5.232 L12.5410286,5.35131429 C12.6061714,5.06331429 12.6665143,4.77531429 12.7213714,4.48594287 L12.7213714,4.48662858 Z M19.5017143,7.5984 L21.0843429,9.18102858 L20.6523429,9.61302858 L19.8253714,8.78605713 C19.6104508,8.95614794 19.3902274,9.11942885 19.1650286,9.27565713 L20.0057143,10.1170286 L19.6162286,10.5065143 C18.1522286,11.6653714 16.7602286,12.0987429 15.4484571,11.8134857 L15.6246857,11.1908571 C16.2233143,11.3142857 16.8411428,11.2669714 17.4774857,11.0482286 C17.4773274,10.7358975 17.4488682,10.4242232 17.3924571,10.1170286 C17.1497143,10.1787429 16.9124571,10.2267429 16.6745143,10.2541714 L16.8891429,9.58491429 C17.6914286,9.4752 18.528,9.06651429 19.3974857,8.35885713 L19.0697143,8.03108571 L19.5017143,7.59908571 L19.5017143,7.5984 L19.5017143,7.5984 Z M17.9382857,9.9312 C18.0102857,10.2212571 18.0528,10.5113143 18.0768,10.8006857 C18.4633723,10.6054138 18.832096,10.3766537 19.1787429,10.1170286 L18.6507429,9.58902858 C18.4086857,9.71794287 18.1707429,9.83177145 17.9382857,9.93188571 L17.9382857,9.9312 Z M17.8347429,14.1414857 L17.3108571,13.6182857 L17.64,13.0820571 C17.7819429,13.2624 17.9293714,13.4290286 18.0809143,13.5812571 C18.2002286,13.6998857 18.3236572,13.6998857 18.4374857,13.5860571 L22.1958857,9.82697142 L22.6470857,10.2781714 L18.7796571,14.1462857 C18.4662857,14.4596571 18.1481143,14.4548571 17.8347429,14.1414857 Z M16.9035429,8.41097142 C16.6601143,8.45417142 16.4235429,8.48228571 16.1856,8.51108571 L16.5174857,7.88365713 C17.4582857,7.73142855 18.3894857,7.37965713 19.3117714,6.83794287 L19.5401143,7.46537142 C19.0697143,7.72594284 18.5897143,7.94057142 18.1049143,8.1024 L14.9074286,11.2998857 L14.4603429,10.8541714 L16.9028571,8.41097142 L16.9035429,8.41097142 Z M21.0418286,9.52731429 L21.4553143,9.94148571 L18.5184,12.8777143 L18.1049143,12.4642286 L21.0418286,9.52731429 L21.0418286,9.52731429 Z"
							id="形状"
							fill="#FFFFFF"
						></path>
					</g>
				</g>
			</svg>
		);
	} else {
		return (
			<svg
				className={className}
				width="16"
				height="16"
				viewBox="0 0 16 16"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<rect
					opacity="0.01"
					x="0.998779"
					y="0.048584"
					width="15"
					height="15"
					fill="black"
				/>
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M1.83212 7.54856C1.83212 3.8819 4.83212 0.881897 8.49878 0.881897C12.1654 0.881897 15.1654 3.8819 15.1654 7.54856C15.1654 11.2152 12.1654 14.2152 8.49878 14.2152C4.83212 14.2152 1.83212 11.2152 1.83212 7.54856ZM2.66545 7.54856C2.66545 10.7986 5.24878 13.3819 8.49878 13.3819C11.7488 13.3819 14.3321 10.7986 14.3321 7.54856C14.3321 4.29856 11.7488 1.71523 8.49878 1.71523C5.24878 1.71523 2.66545 4.29856 2.66545 7.54856Z"
					fill="#4CAB73"
				/>
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M7.20972 5.26818C7.56128 4.91345 8.03003 4.73608 8.61597 4.73608C9.14331 4.73608 9.55347 4.85433 9.90503 5.20906C10.198 5.50467 10.3738 5.91852 10.3738 6.39149C10.3738 6.80534 10.3152 7.16007 10.0808 7.39656C10.0362 7.48658 9.88972 7.61086 9.64136 7.82158C9.56348 7.88765 9.47559 7.96222 9.37769 8.0469C9.2019 8.16514 9.08472 8.28338 9.02612 8.46075C8.96753 8.63811 8.90894 8.81548 8.90894 8.99284V9.11108H8.03003V8.99284C8.03003 8.69723 8.03003 8.40162 8.14722 8.22426C8.2644 7.98777 8.61597 7.63304 9.08472 7.16007L9.2605 6.98271C9.43628 6.80534 9.49487 6.62798 9.49487 6.39149C9.49487 6.155 9.43628 5.91852 9.2605 5.74115C9.08472 5.56379 8.85034 5.50467 8.55737 5.50467C8.14722 5.50467 7.91284 5.62291 7.73706 5.85939C7.56128 6.03676 7.50269 6.33237 7.50269 6.6871H6.62378C6.62378 6.09588 6.79956 5.62291 7.20972 5.26818ZM8.06128 9.92358C8.18628 9.79858 8.31128 9.73608 8.49878 9.73608C8.68628 9.73608 8.81128 9.79858 8.93628 9.92358C9.06128 10.0486 9.12378 10.1736 9.12378 10.3611C9.12378 10.5486 9.06128 10.6736 8.93628 10.7986C8.81128 10.9236 8.68628 10.9861 8.49878 10.9861C8.31128 10.9861 8.18628 10.9236 8.06128 10.7986C7.93628 10.6736 7.87378 10.5486 7.87378 10.3611C7.87378 10.1736 7.93628 10.0486 8.06128 9.92358Z"
					fill="#4CAB73"
				/>
			</svg>
		);
	}
}

Icon.propTypes = {
	className: PropTypes.string,
};
